<template>
  <div class="note">
    <div class="note_back_btn" @click="backBtnClick">
      <i class="el-icon-back"></i>返回
    </div>
    <h3>{{ info.title }}</h3>
    <div class="note-info">
      <span></span>
      <span>{{ info.create_time }}</span>
    </div>
    <div class="note-con">{{ info.content }}</div>
    <div class="delete_note_btn">
      <el-button
        type="danger"
        size="mini"
        @click="deleteNoteClick"
        v-if="noteType === '0'"
        >删除</el-button
      >
    </div>
    <div class="note-pl">
      <div class="note-pl-title">评论区</div>
      <div class="note-pl-innerwrap">
        <div
          v-for="(item, index) of commentList"
          :key="index"
          class="note-pl-item"
        >
          <div class="note-pl-item-user_img">
            <img
              :src="'http://127.0.0.1:8000/avatar/' + item.user.avatar"
            />
          </div>
          <div class="pl-date">{{ item.create_time }}</div>
          <div class="pl-name">{{ item.user.name }}</div>
          <div class="pl-con" v-html="item.content"></div>
        </div>
        <el-pagination
          @current-change="handleCurrentChange"
          :current-page.sync="current"
          layout="total, prev, pager, next"
          :total="total"
          :page-size="10"
        >
        </el-pagination>
      </div>
      <div class="note-pl-write_area">
        <div v-if="!userLogin" class="note-pl-write_area-mask">
          <div class="alert_info-wrap">
            <span class="alert_info">您还没有登录，不可参与评论</span>
            <!-- <span class="alert_link">请登录</span> -->
            <router-link to="/login" class="alert_link">请登录</router-link>
          </div>
        </div>
        <quill-editor
          v-model="plData"
          :options="plEditorOpt"
          ref="plEditor"
        ></quill-editor>
        <div class="pl_btn">
          <el-button
            type="primary"
            @click="plBtnClick"
            class="el-icon-s-promotion"
            >评论</el-button
          >
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "note",
  props: {},
  data() {
    return {
      info: {
        name: "",
        content: "",
        title: "",
        date: "",
      },
      commentList: [],
      plData: "",
      plEditorOpt: {},
      userLogin: false,
      pL: {
        article_id: 1,
        page: 1,
        limit: 10,
      },
      total: 1000,
      current: 1,
    };
  },
  computed: {
    noteId() {
      return this.$route.params.id;
    },
    // userLogin() {
    //   return this.$store.state.user !== null
    // },
    userId() {
      if (this.$store.state.user) return this.$store.state.user.user_id;
      else return "";
    },
    noteType() {
      return localStorage.getItem("noteType");
    },
  },
  created() {},
  mounted() {
    const param = {
      id: this.noteId,
    };
    this.pL.article_id = this.noteId;
    console.log(param);
    // this.$http('get', 'note', param).then(data => {
    //   this.info = data[0]
    // })
    this.getTieList();
    this.getPlList();
  },
  methods: {
    // 点击页码
    async handleCurrentChange() {
      this.pL.page = this.current;
      this.getPlList();
    },
    async getTieList() {
      if (window.sessionStorage.getItem("token") !== "") {
        this.userLogin = true;
      }
      const { data: res } = await this.$axios.get(
        "/article/item/" + this.noteId
      );
      this.info = res;
    },
    async getPlList() {
      const { data: res } = await this.$axios.get("/article/comment/", {
        params: this.pL,
      });
      console.log(res);
      this.commentList = res.data;
      this.pL = {
        article_id: this.pL.article_id,
        page: parseInt(res.listQuery.page),
        limit: res.listQuery.limit,
      };
      this.total = res.total;
      // this.$http('get', 'comment', param).then(data => {
      //   this.commentList = data
      // })
    },
    backBtnClick() {
      this.$router.go(-1);
    },
    //提交评论
    plBtnClick() {
      console.log(window.sessionStorage.getItem("userID"));

      if (this.plData !== "") {
        const plQuer = {
          user_id: window.sessionStorage.getItem("userID"),
          content: this.plData,
          article_id: this.noteId,
        };
        this.$axios.post("/article/speak/", plQuer).then((res) => {
          console.log(res);
          if (res.status === 200) {
            this.$message.success("提交成功");
            this.plData = "";
            this.getPlList();
          } else {
            this.$message.error("提交失败");
          }
        });
      }
    },
    // 删除帖子
    deleteNoteClick() {
      this.$confirm("此操作将永久删除且不可撤销，是否继续", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        const param = {
          id: this.noteId,
        };
        this.deleteNoteItem(param);
      });
    },
    deleteNoteItem(param) {
      this.$http("get", "deleteNote", param)
        .then((data) => {
          if (data === "success") {
            this.$emit("notify", { message: "删除成功", type: "success" });
            localStorage.removeItem("noteType");
            this.$router.go(-1);
          } else {
            this.$emit("notify", { message: "删除失败", type: "error" });
          }
        })
        .catch((error) => {
          this.$message.error(error);
        });
    },
  },
};
</script>
<style lang="scss" scoped>
.note {
  margin: 0 auto;
  width: 800px;
  padding: 0 30px;
  background: #fff;
  .note_back_btn {
    padding-top: 20px;
    float: right;
    color: #409eff;
    cursor: pointer;
  }
  h3 {
    margin: 0;
    padding-top: 20px;
    padding-bottom: 20px;
    color: #333;
  }
  .note-info {
    margin-bottom: 20px;
    span {
      margin-right: 20px;
      color: #666;
    }
  }
  .note-con {
    margin-bottom: 20px;
  }
  .note-pl {
    padding-bottom: 40px;
    .note-pl-title {
      margin-bottom: 10px;
      padding-left: 10px;
      color: #333;
      line-height: 40px;
      font-size: 14px;
      font-weight: bold;
      border-bottom: 2px solid;
    }
    .note-pl-innerwrap {
      padding: 0 10px 10px;
      .note-pl-item {
        position: relative;
        padding: 10px 10px 10px 70px;
        min-height: 60px;
        border-bottom: 1px solid #ececec;
        .note-pl-item-user_img {
          position: absolute;
          margin-left: -60px;
          width: 48px;
          height: 48px;
          border-radius: 50%;
          img {
            width: 100%;
            height: 100%;
            border-radius: 50%;
          }
        }
        .pl-date {
          float: right;
          font-size: 12px;
          color: #bbbbbb;
        }
        .pl-con {
          margin: 10px 0;
          font-size: 14px;
          color: #666;
        }
      }
    }
    .note-pl-write_area {
      position: relative;
      .note-pl-write_area-mask {
        position: absolute;
        left: 0;
        top: 0;
        z-index: 10;
        width: 100%;
        height: 100%;
        background: rgba($color: #000000, $alpha: 0.5);
        .alert_info-wrap {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          color: #fff;
          .alert_link {
            margin-left: 10px;
            color: orange;
            text-decoration: underline;
            cursor: pointer;
          }
        }
      }
      .pl_btn {
        margin-top: 10px;
        text-align: left;
      }
    }
  }
}
</style>
<style lang="scss">
.note-pl-write_area {
  .ql-container {
    min-height: 200px;
  }
}
</style>
